$login-box-bg: #de2728;
$login-box-border-color: #C53535;
$login-box-border-color-2: #707070;
$login-box-color: #F0F7FF;

.auth-card-box{
    .auth-card__logo{
        width: .7rem;
        height: .7rem;
        margin: 0 auto;
        position: relative;
        transform: translate(0,-.4rem);
        opacity: 0;
        transition-duration: $default-transition-duration;
        transition-timing-function: $default-transition-timing;
        transition-property: opacity, transform;
        img{
            display: inline-block;
            border-radius: 100%;
            overflow: hidden;
        }
        .auth-card__logo-line-right,
        .auth-card__logo-line-left{
            width: .9rem;
            height: .01rem;
            background-color: $login-box-border-color;
            position: absolute;
            top: 50%;
            left: 0;
            transform: translate(-155%,-50%);
            z-index: 2;
            opacity: 0;
            transition-duration: $default-transition-duration;
            transition-timing-function: $default-transition-timing;
            transition-property: opacity,transform;
            &::after{
                content: "";
                display: block;
                width: .04rem;
                height: .04rem;
                border-radius: 100%;
                background-color: $login-box-border-color;
                position: absolute;
                top: 50%;
                transform: translate(.04rem,-60%);
                right: 0;
            }
        }
        .auth-card__logo-line-right{
            left: auto;
            right: 0;
            transform: translate(155%,-50%);
            &::after{
                right: auto;
                left: 0;
                transform: translate(-.04rem,-60%);
            }
        }
    }
    .auth-card__main{
        width: 6rem;
        position: relative;
        .auth-card__title{
            text-align: center;
            white-space: nowrap;
            font-size: 20px;
            letter-spacing: 2px;
            color: $login-box-color;
            display: flex;
            justify-content: center;
            align-items: center;
            margin-top: 0.1rem;
            img {
               width: 255px;
               height: 33px; 
            }
            span {
               font-size: 18px;
               font-family: PingFang SC;
               font-weight: 800;
               color: #61613F;
            }
        }
    }
    .auth-login-box.enter & {
        .auth-card__logo{
            transition-delay: 100ms;
            opacity: 1;
            transform: translate(0,0);
            .auth-card__logo-line-right{
                transition-delay: 500ms;
                opacity: 1;
                transform: translate(115%,-50%);
            }
            .auth-card__logo-line-left{
                transition-delay: 500ms;
                opacity: 1;
                transform: translate(-115%,-50%);
            }
        }

        .tzy-lb__box{
            opacity: 1;
        }
        .tzy-lb__title,
        .tzy-lb__form{
            transition-delay: 200ms;
            opacity: 1;
            transform: translateY(0);
        }
    }
}
@keyframes authLineChange{
    0%{
        background-position: -1rem 0;
    }
    100%{
        background-position: calc(100% + 1rem) 0;
    }
}
